<template>
  <div class="pages-container">

    <!-- 搜索框 Or 工具框 -->
    <a-form class="pages-tools-box" :form="form" @submit="getSearch">
      <a-row :gutter="[15, 10]">
        <a-col :span="4">
          <a-form-item>
            <a-input allowClear placeholder="订单号" v-decorator="['orderNum']"/>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-input allowClear placeholder="公司名称" v-decorator="['company']"/>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-input allowClear placeholder="服务商名称" v-decorator="['supplier']"/>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-select allowClear placeholder="选择状态" v-decorator="['state']">
              <a-select-option :value="v.id" v-for="(v, i) in Config.Deliver" :key="i">{{ v.title }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">清空</a-button>
        </a-col>
      </a-row>
    </a-form>

    <!-- 表格 -->
    <div class="pages-content">
      <a-table :columns="columns" :data-source="data" :pagination="false" rowKey="id" :loading="tableLoading">
        <a-space slot="companyId" slot-scope="record">{{ record.company && record.company.title }}</a-space>
        <a-space slot="userId" slot-scope="record">{{ record.user && record.user.name }}</a-space>
        <a-space slot="supplierId" slot-scope="record">{{ record.supplier && record.supplier.title }}</a-space>
        <a-space slot="supplierUserId" slot-scope="record">{{
            record.supplierUser && record.supplierUser.name
          }}
        </a-space>
        <a-space :class="'color-'+record.state" slot="state" slot-scope="record">{{
            record.state | DeliverToLabel
          }}
        </a-space>
        <a-space slot="invoiceState" slot-scope="record">{{ record.invoiceState | ReceiptToLabel }}</a-space>

        <a-space slot="action" slot-scope="text,record,index">
          <a @click="lookDetail(record, index)">查看动态</a>
          <a v-if="record.state == 1 || record.state == 2" @click="goPay(record)">待支付</a>
          <a-upload
              v-if="record.state == 1 || record.state == 2 || record.state == 3"
              name="file"
              class="avatar-uploader"
              :show-upload-list="false"
              :action="Util.getUploadImagePath(record)"
              @change="handleChange($event, record, index)"
          >
            <a>上传附件</a>
          </a-upload>
          <a v-if="record.state == 1" @click="cancelOrder(record, index)">取消订单</a>
          <a v-if="record.state == 1" @click="startOrder(record, index)">开始服务</a>
          <a v-if="record.state == 2" @click="endOrder(record, index)">完成服务</a>
          <a v-if="record.state == 3" @click="protect(record, index)">过保护期</a>
          <a class="color-4" v-if="record.state == 5" @click="payState(record,index)">退款/纠纷审核</a>
        </a-space>
      </a-table>
    </div>

    <!-- 分页 -->
    <a-pagination class="pagination" show-quick-jumper :default-current="current_page" :total="total"
                  @change="changePages"/>

    <!-- 待支付订单 -->
    <a-modal
        title="待支付"
        :visible="visible"
        @ok="visible = false"
        @cancel="visible = false"
    >
      <p>该订单客户选择了使用其他付款方式，以下为提交的信息：</p>
      <p v-if="visPayList.length == 0" class="no-data">暂无数据...</p>
      <p v-for="(v, i) in visPayList" :key="i">
        <a-row style="padding: 10px; border-bottom: 1px solid #ccc;" type="flex" align="middle">
          <a-col :span="20">
            <span>时间：{{ v.createAt }}</span> <br>
            <span>支付金额：{{ v.price }}</span> <br>
            <span>状态：{{ v.state == 1 ? '未确认' : '' }}{{ v.state == 2 ? '已确认' : '' }}</span>
          </a-col>
          <a-col :span="4">
            <a v-if="v.state == 1" @click="setPayList(v.id)">确认支付</a>
          </a-col>
        </a-row>
      </p>
    </a-modal>

    <!-- 处理投诉 -->
    <a-modal
        title="退款/纠纷"
        :visible="visibleResult"
        @ok="visibleResultOK"
        @cancel="visibleResult = false, visibleResultData = {}"
    >
      <p>凭证图片：</p>
      <div>
        <img v-for="(v, i) in (visibleResultData && visibleResultData.payData && visibleResultData.payData.length > 0 && visibleResultData.payData[0].image)" :key="i" :src="v" style="max-width: 40px; max-height: 40px; margin-right: 20px"
             @click="lookPhoto(v)">
      </div>
      <p style="margin-top: 20px">事由原因：</p>
      <div>{{visibleResultData && visibleResultData.payData && visibleResultData.payData.length > 0 && visibleResultData.payData[0].content}}</div>
      <p style="margin-top: 20px">请选择处理结果：</p>
      <a-radio-group name="radioGroup" v-model="valueResult">
        <a-radio :value="1">
          不同意，将订单回滚至提交前的状态
        </a-radio>
        <a-radio :value="2">
          同意，订单将进行结束处理
        </a-radio>
      </a-radio-group>
      <p>请输入处理情况：</p>
      <a-input placeholder="请输入处理情况备注，内容将在用户的交付订单详情进行显示" v-model="visibleResultContent"></a-input>
    </a-modal>

    <!-- 动态 -->
    <a-modal
        title="订单动态"
        :visible="visibleOrder"
        @ok="visibleOrder = false, visibleResultData = {}"
        @cancel="visibleOrder = false, visibleResultData = {}"
    >
      <div v-for="(item, index) in visibleResultData.payData" :key="index">
        <div>{{ item.title }}</div>
        <div v-if="item.hasFile == 1">
          <a :href="item.file" :download="item.fileName" target="_blank">附件：{{ item.fileName }}</a>
        </div>
        <p style="font-size: 12px">{{ item.createAt }}</p>
      </div>

    </a-modal>
  </div>
</template>

<script>
const columns = [
  {title: 'ID', dataIndex: 'id'},
  {title: '订单号', dataIndex: 'orderNum'},
  {title: '标题', dataIndex: 'title'},
  {title: '订单金额', dataIndex: 'price'},
  {title: '未托管金额', dataIndex: 'noPrice'},
  {title: '保护期天数', dataIndex: 'protectDay'},
  {title: '公司', scopedSlots: {customRender: 'companyId'}},
  {title: 'HR', scopedSlots: {customRender: 'userId'}},
  {title: '服务商', scopedSlots: {customRender: 'supplierId'}},
  {title: '顾问', scopedSlots: {customRender: 'supplierUserId'}},
  {title: '订单状态', scopedSlots: {customRender: 'state'}},
  {title: '开票状态', scopedSlots: {customRender: 'invoiceState'}},
  {title: '创建时间', dataIndex: 'createAt'},
  {title: '操作', scopedSlots: {customRender: 'action'}},
];

import config from "../../tools/config";

export default {
  name: "DeliverList.vue",
  data() {
    return {
      visible: false,
      visibleData: {},
      visPayList: [],
      // 公用配置
      Config: {},
      // 分页数据
      current_page: 1,
      total: 100,
      // table数据
      tableLoading: false,
      columns,
      data: [],
      // 搜索表单
      form: this.$form.createForm(this),
      // other
      UserStateList: [],
      visibleResult: false,
      visibleResultData: {},
      valueResult: 1,
      visibleOrder: false,
      visibleResultContent: "",
    };
  },
  created() {
    this.Config = config
    this.getData()
  },
  methods: {

    /**
     * 进行搜索
     * @param e
     */
    getSearch(e) {
      e.preventDefault();
      this.form.validateFields((error) => {
        if (!error) {
          this.getData(1)
        }
      });
    },

    lookPhoto(src) {
      this.Util.lookPhoto(src)
    },

    /**
     * 请求Table数据
     * @param pages
     */
    getData(pages = 1) {
      this.tableLoading = true
      this.Http.get('/admin/pay/index', {
        page: pages,
        ...this.form.getFieldsValue()
      }).then(res => {
        this.tableLoading = false
        if (res.code === 1) {
          this.data = res.data.data
          this.current_page = res.data.current_page
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },

    /**
     * 切换分页时
     * @param event
     */
    changePages(event) {
      this.getData(event)
    },

    /**
     * 清空搜索项
     */
    handleReset() {
      this.form.resetFields();
      this.getData()
    },


    /**
     * 查看详情
     * @param row
     * @param index
     */
    lookDetail(row,) {
      this.visibleOrder = true
      this.visibleResultData = row
    },


    /**
     * 生成支付二维码
     */
    getCode(row, index) {
      console.log(row, index)
    },

    /**
     * 上传附件
     */
    handleChange(info, record, index) {
      console.log(info, record, index)
      if (info.file.status === 'uploading') {
        this.uploadLoading = true;
        return;
      }
      if (info.file.status === 'done') {
        this.Http.post("/admin/pay/upFile", {
          file: info.file.response.data.path,
          name: info.file.response.data.name,
          id: record.id
        }).then(res => {
          if (res.code == 1) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        this.getData()
      }
    },

    /**
     * 取消订单
     * @param row
     * @param index
     */
    cancelOrder(row,) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否确认取消订单',
        onOk() {
          _this.Http.get("/admin/pay/cancelPay", {id: row.id}).then(res => {
            if (res.code == 1) {
              _this.getData(_this.current_page)
              _this.$message.success(res.msg)
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {
        },
      })
    },
    /**
     * 开始订单
     * @param row
     * @param index
     */
    startOrder(row,) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否确认开始服务',
        onOk() {
          _this.Http.get("/admin/pay/start", {id: row.id}).then(res => {
            if (res.code == 1) {
              _this.getData(_this.current_page)
              _this.$message.success(res.msg)
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {
        },
      })
    },
    /**
     * 完成服务
     * @param row
     * @param index
     */
    endOrder(row,) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否确认完成服务',
        onOk() {
          _this.Http.get("/admin/pay/end", {id: row.id}).then(res => {
            if (res.code == 1) {
              _this.getData(_this.current_page)
              _this.$message.success(res.msg)
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {
        },
      })
    },
    /**
     * 过保护期
     * @param row
     * @param index
     */
    protect(row,) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否确认过保护期',
        onOk() {
          _this.Http.get("/admin/pay/protect", {id: row.id}).then(res => {
            if (res.code == 1) {
              _this.getData(_this.current_page)
              _this.$message.success(res.msg)
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {
        },
      })
    },

    /**
     * 打开待支付订单列表
     */
    goPay(row) {
      this.Http.get("/admin/pay/getPayOrder", {
        id: row.id
      }).then(res => {
        if (res.code == 1) {
          this.visPayList = res.data
          this.visible = true
          this.visibleData = row
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    setPayList(id) {
      const _this = this
      this.$confirm({
        content: '是否确认已经支付？',
        onOk() {
          _this.Http.get("/admin/pay/setPayOrder", {id: id}).then(res => {
            if (res.code == 1) {
              _this.$message.success(res.msg)
              _this.visPayList = []
              _this.visible = false
              _this.visibleData = {}
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
      });
    },

    payState(row, index) {
      this.visibleResult = true
      this.visibleResultData = row
    },

    visibleResultOK() {
      const _this = this
      this.$confirm({
        content: '是否确认您的选择？',
        onOk() {
          _this.Http.get("/admin/pay/state", {
            id: _this.visibleResultData.id,
            state: _this.valueResult,
            remark: _this.visibleResultContent,
          }).then(res => {
            if (res.code == 1) {
              _this.$message.success(res.msg)
              _this.getData(_this.current_page)
              _this.visibleResult = false
              _this.visibleResultData = {}
              _this.visibleResultContent = ''
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
      });
    }
  },
}
</script>

<style scoped>

</style>
